<template>
  <div class="index" :style="getImg()"
 >
		<select v-model="language" class="index_select" v-on:change="changeLanguage()">
			<option v-for="(item,index) in arr" :key="index" :value="item.code">{{item.name}}</option>
		</select>
		<div class="index_text">{{$t('m.msg.INDEX_TEXT')}}</div>
		<div class="index_btn_container">
			<router-link to="register" class="index_btn index_btn_color">{{$t('m.headernav.REIGSTER')}}</router-link>
			<router-link to="login" class="index_btn">{{$t('m.headernav.LOGIN')}}</router-link>
		</div>
  </div>
</template>

<script>
import {changeLanguage, languageList, getLanguage} from '@/api/query';
export default {
  name: 'index',
  data() {
		return {
      arr:[],
			language: "zh-CN"
		};
  },
  created: function() {
      this.arr = languageList;
      this.language = getLanguage();
  },
  methods: {
    getImg(){
      let img = ''
      console.log(require('@/assets/img/logoFt_en-US.jpg'))
      if(this.language == languageList[0].code){
        img = require('@/assets/img/logoFt_zh-CN.jpg')
      }else if(this.language == languageList[2].code){
        img = require('@/assets/img/logoFt_en-US.jpg')
      }else{
        img = require('@/assets/img/logoFt_cw.jpg')
      }
      //this.language == 'en-US' ? require('@/assets/img/logoFt_en-US.jpg'): require('@/assets/img/logoFt_zh-CN.jpg');
      return 'background: url('+img+')  0% 0% / 100% 100% no-repeat;'
    },
    changeLanguage() {
      let that = this;
      changeLanguage(that.language)
      .then (res => {
        if(res.code == 200){
          that.$i18n.locale = that.language;
        }else{
          that.$toast.fail(res.msg);
        }
      })
    }    
  }
}
</script>
<style scoped>
  .index {
    /* background: url("../assets/img/logoFt_en-US.jpg") no-repeat; */
    /* background-size:  100% 100%; */
  	height: 100vh;
  	width: 100vw;
  	position: fixed;
  	top: 0;
  }

  .index_img {
    background: url("../assets/img/logoFt_en-US.jpg") no-repeat;
  }

  .index_img2 {
    background: url("../assets/img/logoFt_zh-CN.jpg") no-repeat;
  }
  
  .index_select {
    position: absolute;
    left: 70vw;
    top: 30px;
    width: 200px;
    border: 1px solid #00a0e9;
    line-height: 60px;
    height: 60px;
    color: #00a0e9;
    background: transparent;
	}
	.index_btn_container{
		display: flex;
		position: absolute;
		top: 79vh;
    left: 6vw;
		/*padding: 75vh 10vw;*/
		width: 86vw;
		justify-content: space-between;
	}
	.index_btn{
    width: 44vw;
    height: 5.5vh;
    border: 2px solid #fff;
    line-height: 5.5vh;
    border-radius: 20px;
    font-size: 32px;
    text-align: center;
    color: #fff;
    margin: 0 0.1rem;
	}
	.index_btn_color{
		background-color: #00a0e9;
		border-color: #00a0e9;
	}
	.index_text{
		position: absolute;
    left: 0;
    top: 70vh;
    width: 100%;
    text-align: center;
    color: black;
    font-size: 48px;
	}
</style>